<template>
  <div class="quick-navigation-list">
    <template v-for="navigation in quickNavigationList" :key="navigation.label">
      <div
        class="inline-block quick-navigation-item"
        :class="[activeNavigation == navigation.prop ? 'active' : '', navigation.theme]"
        @click="navigationClickFn(navigation)"
      >
        <div class="flex items-center quick-navigation-item-label">
          {{ navigation.label }}
          <SvgIcon v-if="navigation.icon" :name="navigation.icon" class="navigation-icon" />
        </div>
        <div class="quick-navigation-item-value">{{ navigation.num }}</div>
        <div class="active-border"></div>
      </div>
    </template>
  </div>
</template>
<script setup name="workListQuickNavigation">
  import { ref } from 'vue'
  import { getStatistics } from '@/api/business/workorder'
  import dayjs from 'dayjs'
  import { useRoute } from 'vue-router'
  const route = useRoute()
  const routeQuery = route.query
  const emit = defineEmits(['change', 'reset'])
  // 快捷导航选中
  let activeNavigation = ref('')
  const props = defineProps({
    isSiteCarHouse: Number || String,
  })
  // 快捷导航
  const quickNavigationList = ref([
    { label: '今日交车', theme: 'yellow', prop: 'giveToday', num: 0 },
    { label: '今日还车', theme: 'yellow', prop: 'returnToday', num: 0 },
    { label: '明日交车', theme: 'yellow', prop: 'giveTomorrow', num: 0 },
    { label: '明日还车', theme: 'yellow', prop: 'returnTomorrow', num: 0 },
  ])
  const getStNum = () => {
    getStatistics().then(({ result }) => {
      if (result) {
        quickNavigationList.value.forEach((navigation) => {
          let prop = navigation.prop
          if (prop) {
            navigation.num = result[prop] || 0
          }
        })
      }
    })
  }
  // getStNum()
  const format = (dayjsObj) => {
    return dayjsObj.format('YYYY-MM-DD HH:mm:ss')
  }
  const navigationClickFn = ({ label, prop }) => {
    activeNavigation.value = prop
    let param = {}
    let today = dayjs()
    let begin, end
    switch (label) {
      case '今日交车':
        param = {
          labelName: '今日交车',
        }
        break
      case '今日还车':
        param = {
          labelName: '今日还车',
        }
        break
      case '明日交车':
        param = {
          labelName: '明日交车',
        }
        break
      case '明日还车':
        param = {
          labelName: '明日还车',
        }
        break
    }
    emit('change', param)
  }

  const reset = () => {
    activeNavigation.value = ''
    // emit('change', {})
  }
  const clickActive = (item) => {
    activeNavigation.value = item
  }
  defineExpose({
    reset,
    getStNum,
    clickActive,
  })
</script>
<style lang="less" scoped>
  .quick-navigation-list {
    .quick-navigation-item {
      height: 62px;
      border-radius: 2px;
      padding: 9px 0 9px 16px;
      margin-right: 20px;
      margin-bottom: 20px;
      color: #ffffff;
      cursor: pointer;
      position: relative;
      &:hover {
        transform: scale(1.1);
        transition: transform 0.3s;
        z-index: 999;
      }
      @media screen and (min-width: 1000px) {
        width: calc(100% / 6 - 17.2px);
        &:nth-of-type(5n) {
          margin-right: 20px;
        }
        &:nth-of-type(6n) {
          margin-right: 0;
        }
      }
      @media screen and (min-width: 1440px) {
        width: calc(100% / 7 - 17.5px);
        &:nth-of-type(6n) {
          margin-right: 20px;
        }
        &:nth-of-type(7n) {
          margin-right: 0;
        }
      }
      .quick-navigation-item-label {
        font-size: 12px;
        line-height: 17px;
      }
      .quick-navigation-item-value {
        height: 28px;
        line-height: 28px;
        font-size: 20px;
        font-weight: 600;
      }
      .active-border {
        height: 6px;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        display: none;
        border-radius: 0 0 2px 2px;
      }
    }
    .quick-navigation-item.blue {
      background-color: #95b4fcff;
      .active-border {
        background-color: #5786f3ff;
      }
    }
    .quick-navigation-item.red {
      background-color: #f76964ff;
      .active-border {
        background-color: #e23838ff;
      }
    }
    .quick-navigation-item.yellow {
      background-color: #fab855ff;
      .active-border {
        background-color: #f79a29ff;
      }
    }
    .quick-navigation-item.green {
      background-color: #70d6a1ff;
      .active-border {
        background-color: #33b571ff;
      }
    }
    .quick-navigation-item.active {
      box-shadow: 0 4px 5px rgb(5 19 56 / 20%);
      .active-border {
        display: block;
      }
    }
  }
  .navigation-icon {
    width: 14px;
    height: 14px;
    margin-left: 5px;
  }
</style>
